<template>
  <div class="spots-overview-page">
    <div class="container mx-auto px-4 py-8">
      <div class="page-header mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
          景点全览
        </h1>
        <p class="text-gray-600 dark:text-gray-400">
          探索贵港特色景点，规划您的完美行程
        </p>
      </div>

      <!-- 筛选区域 -->
      <div
        class="filter-section bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8"
      >
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <el-select v-model="filters.area" placeholder="选择区域" clearable>
            <el-option
              v-for="area in areas"
              :key="area.value"
              :label="area.label"
              :value="area.value"
            />
          </el-select>
          <el-select v-model="filters.type" placeholder="景点类型" clearable>
            <el-option
              v-for="type in types"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
          <el-select v-model="filters.sort" placeholder="排序方式">
            <el-option
              v-for="sort in sorts"
              :key="sort.value"
              :label="sort.label"
              :value="sort.value"
            />
          </el-select>
        </div>
      </div>

      <!-- 景点列表 -->
      <div
        class="spots-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
      >
        <div
          v-for="spot in spots"
          :key="spot.id"
          class="spot-card bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-md"
        >
          <div class="relative">
            <el-image
              :src="spot.image"
              class="w-full aspect-[4/3] object-cover"
            />
            <div class="absolute top-4 right-4 space-x-2">
              <el-tag :type="spot.status === 'open' ? 'success' : 'warning'">
                {{ spot.status === "open" ? "开放" : "维护中" }}
              </el-tag>
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-xl font-medium text-gray-900 dark:text-white mb-2">
              {{ spot.name }}
            </h3>
            <p
              class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2"
            >
              {{ spot.description }}
            </p>
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <el-rate v-model="spot.rating" disabled show-score />
              </div>
              <span class="text-primary-600 dark:text-primary-400 font-medium"
                >¥{{ spot.price }}起</span
              >
            </div>
            <div class="flex items-center justify-between">
              <el-button type="primary" @click="handleAddToRoute(spot)"
                >加入路线</el-button
              >
              <el-button @click="$router.push('/guides?spotId=' + spot.id)"
                >查看攻略</el-button
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-section flex justify-center mt-8">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[12, 24, 36, 48]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();

// 筛选选项
const areas = [
  { label: "港北区", value: "gangbei" },
  { label: "港南区", value: "gangnan" },
  { label: "覃塘区", value: "qintang" },
];

const types = [
  { label: "自然景观", value: "nature" },
  { label: "人文古迹", value: "cultural" },
  { label: "主题公园", value: "theme" },
];

const sorts = [
  { label: "推荐排序", value: "recommended" },
  { label: "好评优先", value: "rating" },
  { label: "价格从低到高", value: "price-asc" },
  { label: "价格从高到低", value: "price-desc" },
];

// 筛选条件
const filters = reactive({
  area: "",
  type: "",
  sort: "recommended",
});

// 分页
const currentPage = ref(1);
const pageSize = ref(12);
const total = ref(100);

// 模拟景点数据
const spots = ref([
  {
    id: 1,
    name: "贵港江滨公园",
    description:
      "贵港市标志性景点，沿江而建，景色优美，是市民休闲娱乐的好去处。",
    image: "/images/spots/spot1.jpg",
    status: "open",
    rating: 4.8,
    price: 0,
  },
  // ... 更多景点数据
]);

// 处理加入路线
const handleAddToRoute = (spot) => {
  ElMessage.success(`已将${spot.name}加入到行程路线`);
};

// 处理分页
const handleSizeChange = (val) => {
  pageSize.value = val;
  // 重新加载数据
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  // 重新加载数据
};
</script>

<style lang="scss" scoped>
.spots-overview-page {
  @apply min-h-screen bg-gray-50 dark:bg-gray-900;
}

.spot-card {
  @apply transition-all duration-300;

  &:hover {
    @apply shadow-lg transform -translate-y-1;
  }
}
</style>
